<template>
  <div
    class="tableBox"
    :class="{
      fullAbsolute:isFull
    }"
  >
    <el-table
      :data="tbody"
      style="width: 100%"
      ref="table"
      size="medium"
      :key="tableKey"
      default-expand-all
      fit
      border
      lazy
      :cell-class-name="indexClassName"
      :row-class-name="rowClassName"
      :header-cell-class-name="indexClassName"
      @row-dblclick="handleDblclick"
      @row-click="handleClick"
      :highlight-current-row="tableSet && tableSet.buttons && tableSet.buttons.length>0  && !tableSet.isTableButton"
      :height="isFull?'100%':null"
    >
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
        fixed="left"
        v-if="indexHide"
      >
        <template #header>
          <template v-if="tableSet && tableSet.isCheckbox">
            <div class="tableIndex" @click.stop>
              <el-checkbox
                v-model="checkboxAll"
                :indeterminate="indeterminate"
                @change="onCheckboxAll"
                size="small"
              />
            </div>
          </template>
          <template v-else>
            <b>序号</b>
          </template>
        </template>
        <template #default="scope" v-if="tableSet && tableSet.isCheckbox">
          <div
            class="tableIndex"
            :class="{not:scope.row.tableCheckbox || scope.row.tableCheckboxDisabled}"
            @click.stop
          >
            <div class="hd">{{scope.$index+1}}</div>
            <div class="bd">
              <el-checkbox
                v-model="scope.row.tableCheckbox"
                :disabled="scope.row.tableCheckboxDisabled"
                @change="onCheckboxItem(scope)"
                size="small"
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <template v-for="item in thead">
        <template v-if="item.children && item.children.length>0">
          <el-table-column
            :label="item.label"
            align="center"
          >
            <template v-for="children in item.children">
              <row-cell
                :data="children"
                :tableSet="tableSet"
                :parent-data="tbody"
                @changeBtn="changeBtn"
                @handlerFilter="handlerFilter"
                v-if="!hideValue.includes(children.prop) && hideValue.length===0 && !children.hidden"
                @click.stop
                @dblclick.stop
              >
                <template #[children.prop]="{scope}" v-if="$scopedSlots[children.prop]">
                  <slot :name="children.prop" :scope="scope"></slot>
                </template>
              </row-cell>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <row-cell
            :data="item"
            :tableSet="tableSet"
            :parent-data="tbody"
            @changeBtn="changeBtn"
            @handlerFilter="handlerFilter"
            v-if="!hideValue.includes(item.prop) && hideValue.length===0  && !item.hidden"
            @click.stop
            @dblclick.stop
          >
            <template #[item.prop]="{scope}" v-if="$scopedSlots[item.prop]">
              <slot :name="item.prop" :scope="scope"></slot>
            </template>
          </row-cell>
        </template>
      </template>
      <el-table-column
        label="操作"
        :width="tableSet && tableSet.widthButton?tableSet.widthButton:120"
        align="center"
        fixed="right"
        v-if="tableSet && tableSet.isTableButton && tableSet.buttons && tableSet.buttons.length>0"
      >
        <template #header>
          <b>操作</b>
        </template>
        <template #default="scope">
          <div class="operateButton">
            <template v-for="(buttons,index) in  tableSet.buttons">
              <el-link
                :underline="false"
                @click.stop="handleBtn(buttons,scope)"
                @dblclick.stop
                :disabled="disabledButton(buttons,scope.row)"
                v-if="tableSet && (!tableSet.isTableButtonFold || buttons.show)"
              >
                {{ buttons.label }}
              </el-link>
            </template>
            <popover-box
              v-if="tableSet && tableSet.isTableButtonFold"
              placement="bottom-end"
              :width="100"
            >
              <template #btn>
                <el-link
                  :underline="false"
                >
                  <span>更多</span>
                  <i class="el-icon-arrow-down"></i>
                </el-link>
              </template>
              <template #default>
                <div class="menuNav">
                  <ul>
                    <li
                      v-for="(buttons,index) in  tableSet.buttons"
                      @click.stop="handleBtn(buttons,scope)"
                    >
                      <el-link
                        :underline="false"
                        :disabled="disabledButton(buttons,scope.row)"
                      >
                        {{ buttons.label }}
                      </el-link>
                    </li>
                  </ul>
                </div>
              </template>
            </popover-box>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>
<script>
import RowCell from "@/comModule/TableBox/RowCell";
import PopoverBox from "@/comModule/PopoverBox";

export default {
  name: "TableBox",
  props: {
    thead: {
      type: Array,
    },
    tbody: {
      type: Array,
    },
    tableSet: {
      type: Object,
    },
    tabelData: {
      type: Object,
    },
    hideValue: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isFull: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    search: {
      type: Object,
    },
    width: {
      type: Number,
      default: () => {
        return 180;
      },
    },
    indexHide: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  }, // 获取父组件数据
  components: {
    PopoverBox,
    RowCell
  },
  mounted() {

  },
  data() {
    return {
      zIndex: null,
      checkboxAll:false,
      tableKey:false,
    };
  },
  watch: {
    'loading': {
      handler: function (val) {
        if (val){
          this.checkboxAll=false
          if (this.tabelData){
            this.tabelData.on={}
            this.tabelData.list=[]
          }
          this.refreshTable()
        }
      },
      deep: true
    },
    'tabelData.on': {
      handler: function (val) {
        if (Object.keys(val).length === 0) {
          this.setCurrent()
        }
      },
      deep: true
    },
    'tbody': {
      handler: function (newVal,oldVal) {
        if (newVal.length !== oldVal.length){
          this.refreshTable()
        }
      },
      deep: true
    },
    'thead': {
      handler: function () {
        this.refreshTable()
      },
      deep: true
    }
  },
  methods: {
    //添加样式
    indexClassName({column, columnIndex}) {
      if (columnIndex === 0 && this.indexHide) {
        return 'indexBg'
      }
    },
    //添加样式
    rowClassName({row, rowIndex}) {
      return row.cellClass || ''
    },
    //双击
    handleDblclick(val) {
      this.$emit('handleDblclick', val)
    },
    //单击
    handleClick(row) {
      if (this.tabelData){
        this.tabelData.on = row
      }
    },
    setCurrent(row) {
      this.$refs.table.setCurrentRow(row);
    },
    handlerFilter(row) {
      this.$emit('handlerFilter', row)
    },
    //表单提交
    changeBtn(val, valAll, name) {
      this.$emit('changeBtn', val, valAll, name)
      this.$emit(name, val, valAll)
    },
    //按钮禁用状态
    disabledButton(val, row) {
      let disabledState = true
      //如果表格有选中值着启用
      if (row.disabledButton && row.disabledButton.length>0){
        if (!row.disabledButton.includes(val.label)) {
          disabledState = false
        }
      }
      return disabledState
    },
    //按钮点击
    handleBtn(val, scope) {
      if (!this.disabledButton(val,scope.row)){
        this.$emit('handleBtn', val, scope.row)
      }
    },
    //全选
    onCheckboxAll(state){
      this.tbody.forEach(item=>{
        if (!item.tableCheckboxDisabled){
          this.$set(item,'tableCheckbox',state)
        }
      })
    },
    //选中
    onCheckboxItem(scope){

    },
    //选中
    //重新渲染表格
    refreshTable(){
      this.tableKey=!this.tableKey
    },
  },
  computed: {
    indeterminate(){
      let state=false
      let list= []
      list = this.tbody.filter(item=>{
        return item.tableCheckbox && !item.tableCheckboxDisabled
      })
      if (list.length>0 && list.length<this.tbody.length){
        state=true
      }
      this.tabelData.list=list
      return state
    },
  }
};
</script>
<style lang="scss" scoped>
.tableBox::v-deep {
  &.fullAbsolute {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
  .indexBg {
    background: #f5f5f5 !important;
    color: #333;
  }
  .el-table {
    .el-table__header {
      .el-table__cell {
        background: #f5f5f5;
        font-weight: normal;
        color: #333;
      }
    }
    .el-table__row {
      &.primary {
        background: #ecf5ff;
      }
      &.success {
        background: #f0f9eb;
      }
      &.info {
        background: #f3f3f3;
        color: #999aaa;
      }
      &.warning {
        background: #fdf6ec;
      }
      &.danger {
        background: #ffeff0;
        color: #e13335;
      }
      &.current-row {
        background: #3f61f1;
        color: #fff;
        .el-table__cell {
          background: initial;
          .el-link {
            color: #fff;
            &:hover {
              color: #fff !important;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  .operateButton{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    >*{
      &:not(:last-child){
        margin-right: 16px;
      }
    }
  }
  .tableIndex{
    display: flex;
    align-items: center;
    justify-content: center;
    &:not(.not){
      .bd{
        display: none;
      }
      &:hover{
        .hd{
          display: none;
        }
        .bd{
          display: block;
        }
      }
    }
    &.not{
      .hd{
        display: none;
      }
      .bd{
        display: block;
      }
    }
  }
}
</style>
